<template>
	<view class="record_count">
		<view class="record_l">
			<image class="record_img" :src="record.site==='start'&& record.status===2? ori: 
			record.site==='start'&& record.status===1? ori_on :
			record.site===''&& record.status===2? clo :
			record.site===''&& record.status===1? clo_on :
			record.site==='end'&& record.status===2? des :
			record.site==='end'&& record.status===1? des_on : ''"></image>
		</view>
		<view class="record_r">
			<view class="record_r_o">
				<view class="record_r_o_tit">{{record.name}}<text class="comp_content_sta" :class="record.status===2?'sign_no':'sign_on'">{{record.status===2?'未完成':'已完成'}}</text></view>
			</view>
			<view class="record_r_t">
				打卡时间：{{record.date}}
			</view>
			<view class="record_r_th" v-if="isload==='2' && record.site!='start'">
				<view>打卡照片：</view>
				<view >
					<image :src="record.img" class="record_r_th_img"></image>
				</view>
			</view>
			<view class="record_r_th" v-else-if="isload==='1' && record.site!='start'">
				<view>打卡照片：</view>
				<view v-if="record.status===1">
					<image :src="record.img" class="record_r_th_img"></image>
				</view>
				<view v-if="record.status===2" @click="recordid(record.id)">
					<image-upload :max="1" name="file" :chooseNum="1" v-model="record.check_img"
						@chooseSuccess="ChooseSuccess" @imgDelete="imgDelete">
					</image-upload>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import imageUpload from '@/components/image-upload/image-upload.vue'
	export default {
		name: "record_count",
		components: {
			imageUpload
		},
		props: {
			record: {
				type: Object,
				default () {
					return []
				}
			},
			isload:{
				type:String,
				default:'1'
			}
		},
		data() {
			return {
				ori: '/static/clockIn/origin.png',
				ori_on: '/static/clockIn/origin_on.png',
				des: '/static/clockIn/des.png',
				des_on: '/static/clockIn/des_on.png',
				clo: '/static/clockIn/clock.png',
				clo_on: '/static/clockIn/clock_on.png',
				
				bgupload:'/static/clockIn/icon-address.png',
				config: {
					count: 1, // 上传图片张数
					sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
				},
			}
		},
		methods: {
			ChooseSuccess(tempFilePaths) { //选择图片返回
				this.$emit('ChooseSuccess', tempFilePaths)
				/* if (this.record.status === 2) {
					this.$emit('ChooseSuccess', tempFilePaths)
				}else if(this.record.status === 1){
					uni.showToast({
						title:'已完成不能在上传！',
						icon:none,
						duration:2000
					})
				} */
			},
			recordid(id) {
				this.$emit('recordid', id)
			},
			imgDelete() {
				this.$emit('imgDelete')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sign_no {
		background-color: #eee;
		color: #333;
	}

	.sign_on {
		background-color: #02BB6F;
		color: #fff;
	}

	.fc_green {
		font-size: 26rpx;
		color: #02BB6F;
	}

	.magin_l {
		margin-left: 25rpx;
	}

	.color-red {
		color: red !important;
	}

	.font-small {
		font-size: 24rpx !important;
	}

	.record_count {
		display: flex;
		width: 100%;
		margin-bottom: 30rpx;

		.record_l {
			display: flex;
			width: 71rpx;
			margin-right: 9rpx;

			.record_img {
				width: 71rpx;
				height: 82rpx;
			}
		}

		.record_r {
			display: flex;
			flex-direction: column;
			width: calc(100% - 80rpx);
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;

			.record_r_o {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.record_r_o_tit {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					
					.comp_content_sta {
						margin-left: 18rpx;
						border-radius: 15rpx;
						height: 30rpx;
						line-height: 30rpx;
						font-size: 18rpx;
						padding: 0 10rpx;
					}
				}
				
			}

			.record_r_t {
				margin-bottom: 20rpx;
			}

			.record_r_th {
				display: flex;
				margin-bottom: 20rpx;

				.record_r_th_img {
					width: 160rpx;
					height: 160rpx;
				}
			}
		}
	}
</style>
